<!--
 * Date: 2018年01月25日 16:17:35
 * LastEditors: lvyou
 * LastEditTime: 2019年11月27日 16:28:39
 * FilePath: \youlinweb-master\src\components\myinteration\newmyjoinunuse.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div>
    <mt-popup v-model="isdelete" class="delete-header-popup">
      <div style="width: 6.2rem;height: 2.4rem;border-radius:0.1rem">
        <div class="delete-his" >
          <span >{{pophit}}</span>
        </div>
        <div class="delete-his-bottom">
          <div class="cancle-history" @click="cancle()">取消</div>
          <div class="queding-his" @click="soldconfirm()" v-if="pophit=='确认售出'">确定</div>
          <div class="queding-his" @click="deleteconfirm()" v-if="pophit=='确认删除'">确定</div>
        </div>
      </div>
    </mt-popup>
    <div v-if="listnodata">
      <div class="shuoshuo-new">
        <span class="yl-2kong nosvg">
          <span class="path1">
            <span class="path2">
              <span class="path3">
                <span class="path4">
                  <span class="path5">
                    <span class="path6">
                      <span class="path7">
                        <span class="path8">
                          <span class="path9"></span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
        </span>
        <span class="no-text">啊哦，这里空空的，让人感觉怪怪的，赶紧来填上一笔吧！</span>
      </div>
    </div>
    <div class="loadmore-container" ref="myPublishUnuseWrapper">
     <div class="loadmore-ul">
      <div v-for="(items,index) in list" :key="index">
        <span class="yl-2yiguo outofdate" v-if="items.replacedResult==2"><span class="path1"><span class="path2"><span class="path3"><span class="path4"><span class="path5"><span class="path6"></span></span></span></span></span></span></span>
        <span class="yl-2yishou sold" v-if="items.replacedResult==1"><span class="path1"><span class="path2"><span class="path3"><span class="path4"><span class="path5"><span class="path6"><span class="path7"></span></span></span></span></span></span></span></span>
        <div class="post-container "  @click="commentsvg(index)">                
          <div class="post-thumb" v-if="items.picture.length"><img v-lazy="items.picture[0].src" /></div>
          <!-- <div class="post-thumb" v-else><img src="https://youlingqinius.wonderlandnet.cn/Fg64HUoD236GfN95mgRNDqwH-sEw?imageMogr2/auto-orient/thumbnail/!174x134r/gravity/Center/crop/174x134" /></div> -->
          <div class="post-content">
              <p class="post-title">{{items.title}}</p>
              <div style="display:flex">
                <div class="pricenum" style="font-size:0.22rem;margin-bottom:0.05rem;padding-right:0.05rem">¥</div>
                <div class="pricenum">{{items.price}}</div>
              </div>
          </div>
          <div class="thubmup-bottom">
              <div class="some-thumb-up" @click="thumbup(index)" >
                <span v-if="items.isgood==0" class="yl-2zan thumbnum" style="color:#9b9b9b" >  {{items.likes}}</span>
                <span v-else-if="items.isgood==1"  class="yl-2zan thumbnum"  style="color:#fb685b">  {{items.likes}}</span>
              </div>
          
              <div class="comment" @click="commentsvg(index)">
                <span class="yl-dianp commentnum"> {{items.commentNumber}}</span>
              </div>
          </div>
        </div>
        <div class="body-sep"></div>
        <div class="soldfa">
           <div class="confirmsoldout" @click="confirmsoldout(index)" v-if="items.replacedResult==0">确认售出</div>
           <div class="confirmsoldout" @click="resendreplace(index)">编辑</div>
           <div class="confirmsoldout" @click="deletereplace(index)">删除</div>
        </div>
      </div>
      <p style="padding-bottom:60px;"></p>
     </div> 
    </div>
  </div>
</template>
<script>
import { Indicator } from "mint-ui";
import api from "src/api/index";
export default {
  data() {
    return {
      page: 1,
      totalPage: 0,
      is_r: false,
      list:[],
      isdelete:false,
      index:"",
      pophit:"确认售出",//弹框提示
      listnodata:false,
    }
  },
  mounted() {
    Indicator.open("加载中...");
    this.getList().then(res=>{
      this.initScroll();
    }).then(data => {
      this.$nextTick(() => {
        if (!!this.myscroll) this.myscroll.refresh();
      });
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if ("myPublishUnuse2detail" == localStorage.turnCount) {
        if (loadmore.length > 0) {
          setTimeout(() => {
            loadmore[0].style.transform = localStorage.turnBackTopic;
          }, 0);
        }
        localStorage.turnCount = "";
        Indicator.close();
      } 
    });
  },
  components: {
   
  },
  methods: {
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let myPublishUnuseWrapper = this.$refs.myPublishUnuseWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(myPublishUnuseWrapper, {
            preventDefault: false,
            onScrollMove: function() {
              if ((this.y <= (this.wrapperH - this.scroller.clientHeight-50))&& _this.is_r == false) {
                _this.is_r = true;
                if(_this.page<_this.totalPage){
                  _this.page++;
                  _this.getList();  
                }
              }
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
    getList (){
        let p = new Promise((resolve, reject) => {
          if ("myPublishUnuse2detail" == localStorage.turnCount) {
            let myPublishUnuseObj = JSON.parse(localStorage.myPublishUnuseStorage);
            this.list = myPublishUnuseObj.list;
            this.page = myPublishUnuseObj.page;
            this.totalPage = myPublishUnuseObj.totalPage;
            if(this.page<this.totalPage){
              this.is_r=false;
            }
           
            resolve(true);
          }else{
            let params = {limit:10,page:this.page,publishType:2} ;
            api.QueryMypublish(params).then(res => {
                Indicator.close();
                if(res.success){
                    this.totalPage = res.data.totalPage
                    this.list = this.is_r
                      ? [...this.list, ...res.data.list]
                      : res.data.list;
                    if(this.page<res.data.totalPage){
                        this.is_r=false;
                    }
                    if(this.list.length==0){
                        this.listnodata = true;
                    } else{
                      this.listnodata = false;
                    }
                    if(this.myscroll){
                      this.$nextTick(() => {
                        this.myscroll.refresh();
                      });
                    } 
                    let myPublishUnuseObj = JSON.stringify({
                      list:this.list,
                      page: this.page,
                      totalPage: this.totalPage,
                    });
                    localStorage.myPublishUnuseStorage = myPublishUnuseObj;
                }
                  resolve("获取未发布闲置内容....");
              }) ;
          }
        })
        return p;
    },
    //删除闲置
    deletereplace(index){
        this.pophit = "确认删除";
        this.isdelete = true;
        this.index = index;
    },
    //重发
    resendreplace(index){
      this.$router.push({
        path: "/publishreplace",
        query: { replacedId: this.list[index].replacedId, isrepeat: true,tag:0 }
      });
    },
        //获取跳转前的位置
    getTransformState() {
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if (loadmore.length > 0) {
        localStorage.turnBackTopic = loadmore[0].style.transform;
      }
    },
    confirmsoldout(index){
        this.pophit = "确认售出";
        this.isdelete = true;
        this.index = index;
    },
    cancle () {
      this.isdelete = false ;
    },
    //确认售出
    soldconfirm () {
       this.isdelete = false ;
				api.ReplaceSold({replacedId:this.list[this.index].replacedId}).then( res => {
            if(res.success){
              this.list[this.index].replacedResult=1
            }
				})
    },
    //确认删除
    deleteconfirm(){
      this.isdelete = false ;
      const data = {
          replacedId: this.list[this.index].replacedId
        };
      api.Querydeletereplace(data).then(res => {
        if (res.success) {
          this.isdelete = false;
          this.list.splice(this.index,1)
        } else {
          this.$toast("删除失败");
        }
      });
    },
    thumbup(index){
      const params = {
        replacedId: this.list[index].replacedId,
        createReplacedUserId: this.list[index].userId
      };
      if(this.list[index].isgood == 0){
        api.Queryreplacethumbup(params).then(res => {
          if (res.success) {
            this.list[index].isgood=1;
            this.list[index].likes = res.data;
          }
        });
      }else if(this.list[index].isgood == 1){
        api.Querycanclereplacethumbup(params).then(res => {
          if (res.success) {
              this.list[index].isgood=0;
              this.list[index].likes = res.data;
          }
        });
      }
    },
    commentsvg(index){
      localStorage.turnCount = "myPublishUnuse2detail";
      this.getTransformState();
      this.$router.push({
        path: "/replacedetail",
        query: {
          replacedId: this.list[index].replacedId,
          replacedResult: this.list[index].replacedResult,
          replaceIndex: index
        }
      }); 
    }

  }
};
</script>
<style scoped>
.delete-his-bottom{
  color: #fb685b
}
.delete-header-popup{
    border-radius: 0.1rem;
  }
.outofdate{
  max-height: 0.8rem;
  background: #ffffff;
  position: absolute;
  right: 0;
}
.sold{
  max-height: 0.8rem;
  background: #ffffff;
  position: absolute;
  right: 0;
}
.sold span{
  color: white;
}
.comment-page{
  height: 550px;
  background: #f5f5f5;
}
.thumbnum{
  color: #9b9b9b;;
}
.commentnum{
  color: #9b9b9b;
}
.some-thumb-up{
  padding-right:0.4rem;
  text-align: center;
  font-size: 0.26rem;
  line-height: 0.6rem;
}
.post-container {
  padding: 0.3rem;
  overflow: auto;
  background: #fff;
}
.post-thumb {
  padding-right: 0.2rem;
  float: left;
}
.post-thumb img {
  display: block;
  width: 2.13rem;
  height: 1.7rem;
}
.post-content {
  margin-top: 0.1rem;
}
.post-abbreviations {
  font-size: 0.22rem;
  color: #777777;
  margin: 0 0 0.12rem 0;
  clear: inherit;
  line-height: 0.3rem
}
.post-title {
  clear: inherit;
  font-weight: bold;
  font-size: 0.28rem;
  color: #333333;
  margin: 0 0.8rem 0.15rem 0;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.post-price {
  display: flex;
}
.priceicon {
  font-size: 0.22rem;
  color: #dc4b4e;
  padding-right: 0.05rem
}
.pricenum {
  font-size: 0.26rem;
  color: #dc4b4e;
}

.body-sep {
  margin: 0 0.3rem 0 0.3rem;
  height: 1px;
  background-color: #e6e6e6;
}
  .thubmup-bottom{
    display: flex;
     justify-content: flex-start; 
    align-items: center;
    background-color: white;
  }
  .confirmsoldout{
    padding:0.05rem 0.2rem 0.45rem 0.2rem;
    border: 1px solid #494949;
    margin-left: 0.15rem;
    height: 0.4rem;
    line-height: 0.4rem;
    border-radius: 1.5px;
  }
  .soldfa{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 1rem;
    line-height: 0.9rem;
    padding: 0 0.3rem;
    margin-bottom: 0.2rem;
    background: #ffffff
  }
</style>
